<template>
  <div class="schemas-wrapper">
    <div v-for="(item, i) in data" :key="i">
      <header>{{ item.description }}</header>
      <draggable
        :value="item.list"
        :sort="false"
        :clone="onClone"
        :move="onMove"
        :group="{ name: 'people', pull: 'clone', put: false }"
      >
        <div v-for="schema in item.list" :key="schema.tag">
          <span>{{ schema.description }}</span>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import data from "./data";
import draggable from "@/components/vuedraggable/vuedraggable";
import { cloneDeep } from "lodash-es";
import PubSub from "pubsub-js";
let field = 1;
export default {
  components: {
    draggable,
  },
  data() {
    return {
      data: Object.freeze(data),
    };
  },
  methods: {
    onClone(e) {
      const currentTime = +new Date();
      const element = { ...e, id: `${e.tag}_${currentTime}` };

      // if (element.tag === "aegle-input") {
      //   element.name = `field${field}`;
      //   field++;

      //   PubSub.publish("updateModel", element.name);
      // }
     
      return cloneDeep(element);
    },
    onMove(e) {
      console.log(e);
    },
  },
};
</script>

<style></style>
